<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import circles from '@/api/circles.js'
import { FILE_URL } from '@/api/config.js'

// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  circlesId: 0,
  plate: 'dynamic',
  lists: [],
})

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const handleChange = (e: { oldIndex: number; newIndex: number }) => {
  console.log(`原index: ${e.oldIndex}, 新index: ${e.newIndex}`)
  zoneSortable(state.lists[e.oldIndex].id, state.lists[e.newIndex].id)
}

const getCirclesZone = () => {
  circles
    .circlesZone({
      circles_id: state.circlesId,
      plate: state.plate,
      status: 'all',
    })
    .then((res) => {
      if (res.code == 1) {
        state.lists = res.data
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
      }
    })
    .catch((err: any) => {
      console.log(err, 'getCirclesZone')
    })
}

const zoneSortable = (zoneId: number, targetId: number) => {
  circles
    .circlesManageZoneSortable({
      circles_id: state.circlesId,
      id: zoneId,
      target_id: targetId,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      if (res.code == 1) {
        getCirclesZone()
      }
    })
    .catch((err: any) => {
      console.log(err, 'zoneSortable')
    })
}
onLoad((options) => {
  if (!options?.circlesId) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.circlesId = options.circlesId
  state.plate = options.plate

  getCirclesZone()
})
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      <text v-if="state.plate == 'dynamic'">动态分区排序</text>
      <text v-else-if="state.plate == 'usedIdle'">闲置分区排序</text>
      <text v-else-if="state.plate == 'organizeBureau'"> 组局分区排序 </text>
    </TnNavbar>
    <view class="container">
      <view class="tn-mt-sm" :style="{ paddingTop: `${navbarHeight}px` }">
        <view class="">
          <view class="title tn-mb">
            分区排序
            <text class="tn-text-xs" style="color: #9c9c9c">
              (长按右侧图标拖拽排序)
            </text>
          </view>

          <drag-scroll-view
            :list="state.lists"
            height="100vh"
            @change="handleChange"
          >
            <template #default="{ item, index }">
              <view class="item">
                <view>
                  {{ item.name }}
                  <text v-if="item.status == '0'" class="tn-text-xs tn-ml-sm">
                    （已下架）
                  </text>
                </view>
                <drag-handle :index="index">
                  <TnIcon name="align" />
                </drag-handle>
              </view>
            </template>
            <template #ghost="{ item, index }">
              <view class="item ghost">
                <view>
                  {{ item.name }}
                  <text v-if="item.status == '0'" class="tn-text-xs tn-ml-sm">
                    （已下架）
                  </text>
                </view>
                <TnIcon name="align" />
              </view>
            </template>
          </drag-scroll-view>
        </view>
      </view>
      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f7f8;
  padding: 0 30rpx;

  .item {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 15rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx;
    margin: 10rpx 6rpx;

    &.ghost {
      opacity: 0.9;
      scale: 0.96;
    }
  }
}
</style>
